<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
// 获取DOM节点
const charts = ref()
// 组件挂载完毕
onMounted(() => {
  // 一个容器可以同时展示多种类型的图形图标
  echarts.init(charts.value).setOption({
    // 标题组件
    title: {
      // 主标题
      text: '景区排行',
      link: 'https://www.baidu.com',
      // 标题位置
      left: '20%',
      // 主标题样式
      textStyle: {
        color: 'yellow',
        fontSize: 20,
      },
      // 副标题
      subtext: '各大景区',
      // 副标题样式
      subtextStyle: {
        color: 'red',
        fontSize: 16,
      },
    },
    // x|y轴
    xAxis: {
      type: 'category', // 在x轴上均匀分布展示
    },
    yAxis: {},
    // 布局组件
    grid: {
      left: 20,
      bottom: 20,
      right: 20,
    },
    // 系列：决定显示图形图标是哪一种
    series: [
      {
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60, 70],
        // 柱状条文本标签
        label: {
          show: true,
          position: 'top', //文本标签位置
          color: 'green',
        },
        // 柱状条是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'black', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        // 柱状条样式
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: function (data: any) {
            // 根据数据动态设置柱状条颜色
            // 给每一个柱条设置颜色
            const arr = [
              'red',
              'orange',
              'yellow',
              'green',
              'blue',
              'purple',
              'pink',
            ]
            return arr[data.dataIndex]
          },
        },
      },
      {
        type: 'bar',
        data: [10, 20, 30, 40, 50, 60, 70],
        // 柱状条文本标签
        label: {
          show: true,
          position: 'top', //文本标签位置
          color: 'green',
        },
        // 柱状条是否显示背景颜色
        showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'black', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        // 柱状条样式
        itemStyle: {
          borderRadius: [5, 5, 0, 0],
          color: function (data: any) {
            // 根据数据动态设置柱状条颜色
            // 给每一个柱条设置颜色
            const arr = [
              'red',
              'orange',
              'yellow',
              'green',
              'blue',
              'purple',
              'pink',
            ]
            return arr[data.dataIndex]
          },
        },
      },
      {
        type: 'line',
        data: [10, 30, 30, 20, 50, 60, 90],
        smooth: true, // 平滑曲线
      },
    ],
    tooltip: {
      backgroundColor: 'rgba(50,50,50,0.7)', // 提示框背景颜色
    },
  })
})
</script>

<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <!--    图形图标的容器-->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-rt.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0;

  .title {
    margin-left: 5px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
